<!-- 促销活动 -->
<template>
  <div class="app-container">
    <!-- 上部分表单 -->
    <el-form
      class="globalSerchFormStyle"
      :model="queryParams"
      ref="queryForm"
      label-position="right"
      :inline="true"
      label-width="80px"
    >
      <el-row>
        <!-- <el-col
          :span="6"
          v-if="['', null].includes($store.state.user.userLevel)"
        >
          <el-form-item label="油企名称" prop="enterpriseId" size="small">
            <el-select
              v-model="queryParams.enterpriseId"
              :clearable="true"
              filterable
              placeholder="请选择油企"
              @change="handleSelectChange"
            >
              <el-option
                v-for="(item, index) in enterpriseList"
                :key="index"
                :value="item.enterpriseId"
                :label="item.enterpriseName"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col> -->

        <el-col :span="6" v-if="!['2'].includes($store.state.user.userLevel)">
          <el-form-item
            label="活动门店"
            prop="stationId"
            clearable
            size="small"
          >
            <el-select
              v-model="queryParams.stationId"
              :clearable="true"
              filterable
              placeholder="请选择活动门店"
            >
              <el-option
                v-for="item in stationList"
                :key="item.stationId"
                :label="item.stationName"
                :value="item.stationId"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item
            label="活动名称"
            prop="marketActivityName"
            clearable
            size="small"
          >
            <el-input
              v-model="queryParams.marketActivityName"
              placeholder="请输入活动名称"
              clearable
              size="small"
            />
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="活动类型" prop="region" clearable size="small">
            <el-select
              v-model="queryParams.region"
              clearable
              placeholder="请选择活动类型"
            >
              <el-option label="打折" value="DC"></el-option>
              <!-- <el-option label="特价" value="SP"></el-option> -->
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row class="global_el_rowStyle" :gutter="10">
      <el-col :span="1.5">
        <el-button type="primary" @click="handleQuery" size="mini"
          >查询</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" size="mini" @click="resetQuery" plain
          >重置</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button @click="createActivity" size="mini" plain
          >创建活动</el-button
        ></el-col
      >
    </el-row>

    <el-table
      style="width: 100%"
      :data="orderList"
      v-loading="loading"
      header-align="left"
      border
    >
      <el-table-column type="index" label="序号" width="60"></el-table-column>
      <el-table-column label="活动名称" align="left" prop="marketActivityName">
      </el-table-column>
      <el-table-column
        prop="stationName"
        label="活动门店"
        align="left"
        width="180"
      >
      </el-table-column>
      <el-table-column label="活动类型" prop="commodityName" align="left">
        <template slot-scope="scope">
          {{ scope.row.commodityName == "DC" ? "特价" : "打折" }}
        </template>
      </el-table-column>
      <el-table-column label="开始时间" prop="beginTime" align="left">
      </el-table-column>
      <el-table-column label="结束时间" prop="endTime" align="left">
      </el-table-column>
      <el-table-column label="活动状态" prop="commodityName" align="left">
        <template slot-scope="scope">
          {{ scope.row.isEnabled == "0" ? "未启用" : "" }}
          {{ scope.row.isEnabled == "1" ? "进行中" : "" }}
        </template>
      </el-table-column>
      <el-table-column label="最近一次修改时间" prop="updateTime" align="left">
      </el-table-column>
      <el-table-column
        label="操作"
        align="left"
        class-name="small-padding fixed-width"
        width="120"
      >
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="editActivity(scope.row)"
            >编辑</el-button
          >
          <el-button size="mini" type="text" @click="startActivity(scope.row)">
            {{ scope.row.isEnabled == "1" ? "停止" : "启动" }}
          </el-button>
          <el-popconfirm
            title="确定删除该活动吗？"
            @confirm="onRemove(scope.row)"
          >
            <el-button
              size="mini"
              slot="reference"
              type="text"
              style="margin-left: 15px"
              >删除</el-button
            >
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 创建活动 -->
    <PromotionalActivityAdd
      :dialogFormVisible.sync="dialogFormVisible"
      :enterpriseId="queryParams.enterpriseId"
      :formActivityData="formActivityData"
      :condition="condition"
    ></PromotionalActivityAdd>
  </div>
</template>

<script>
import {
  enterpriseList,
  listEnterpriseStation,
} from "@/api/nonOil/putlntoStorage";
import {
  activityList,
  activityDelete,
  activityStart,
} from "@/api/nonOil/goods";
import PromotionalActivityAdd from "./promotionalActivity_add.vue";
export default {
  name: "PromotionalActivity",
  components: { PromotionalActivityAdd },
  data() {
    return {
      condition: "",

      enterpriseList: [],
      stationList: [],

      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        enterpriseId: null,
        stationId: null,
        marketActivityName: null,
      },
      // 总条数
      total: 0,
      //表格数据
      orderList: [],

      loading: false,

      // 创建活动弹框
      dialogFormVisible: false,
      formActivityData: {},
    };
  },
  created() {
    // 油企
    if (this.presentEnterprise && this.presentEnterprise.enterpriseId) {
      this.queryParams.enterpriseId = this.presentEnterprise.enterpriseId;
      this.getStationList(this.queryParams.enterpriseId);
    }
    // 油站账号登录
    if (this.presentSation) {
      this.queryParams.stationId = this.presentSation;
      this.handleQuery();
    }
    this.getList();
    this.getEnterpriseList();
  },

  methods: {
    // 请选择油企
    handleSelectChange(value) {
      this.stationList = [];
      this.queryParams.stationId = null;
      this.getStationList(value);
    },

    // 查询油企
    getEnterpriseList() {
      enterpriseList().then((res) => {
        this.enterpriseList = res.rows;
      });
    },

    // 查询油站
    getStationList(val) {
      listEnterpriseStation({ enterpriseId: val, status: "1" }).then((res) => {
        this.stationList = res;
      });
    },

    // 删除
    onRemove(row) {
      activityDelete({ marketActivityId: row.marketActivityId }).then((res) => {
        if (res && res.code === 200) {
          this.$message.success(res.msg);
          this.getList();
        } else {
          this.$message.error(res.msg);
        }
      });
    },

    // 启用停用
    startActivity(row) {
      const isEnabled = row.isEnabled == "0" ? "1" : "0";
      activityStart({
        marketActivityId: row.marketActivityId,
        isEnabled,
      }).then((res) => {
        if (res && res.code === 200) {
          this.$message.success(res.msg);
          this.getList();
        } else {
          this.$message.error(res.msg);
        }
      });
    },

    // 创建活动
    createActivity() {
      this.condition = "add";
      this.dialogFormVisible = true;
      this.formActivityData = {
        stationId: null,
        marketActivityType: null,
        marketActivityName: null,
        beginTime: null,
        endTime: null,
        allOrPart: "1",
        activityCommodityRulesList: [],
      };
    },

    // 编辑活动
    editActivity(row) {
      this.condition = "edit";
      this.dialogFormVisible = true;
      this.formActivityData = row;
    },

    // 搜索列表
    getList() {
      this.loading = true;
      let queryParams = this.queryParams;

      activityList(queryParams)
        .then((response) => {
          this.loading = false;
          this.orderList = response.rows;
          this.total = response.total;
        })
        .catch(() => {
          this.loading = false;
          this.orderList = [];
          this.total = 0;
        });
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.pageNum = 1;
      this.queryParams.pageSize = 10;
      this.resetForm("queryForm");
      this.getList();
    },
  },

  watch: {
    dialogFormVisible: {
      deep: true, // 深度监听
      handler(newVal, oldVal) {
        if (!newVal) {
          this.getList();
        }
      },
    },
  },
};
</script>

<style lang="scss" scoped></style>
